<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${request.contextPath}/statics/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/public.css" media="all">
	<script src="${request.contextPath}/statics/js/jquery.js"></script>
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
    <script>
    var c=0;
    function zhankai(){
    	if(c==0){
        	c=1;
        	document.getElementById('aaa').style.display="none"; 
        	document.getElementById('icon1').style.display="none"; 
        	document.getElementById('icon2').style.display="block";
    	}else{
        	c=0;
        	document.getElementById('aaa').style.display="block"; 
        	document.getElementById('icon1').style.display="block"; 
        	document.getElementById('icon2').style.display="none";
    	}
    	
    }
    </script>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">
     <div class="layui-row layui-col-space15" id="b">
        <div style="background-color: #fff;height:20px" onclick="zhankai()">
        	一楼<i id="icon1" class="layui-icon layui-icon-up" style="font-size: 15px; color: #1E9FFF;"></i>
        	<i id="icon2" class="layui-icon layui-icon-down" style="font-size: 15px; color: #1E9FFF;display: none;"></i>
        </div>
		<div class="layui-row layui-col-space15" id="aaa">
     	</div>
    </div>

     <div class="layui-row layui-col-space15" id="aaa">
     </div>
    <!-- <div class="layui-row layui-col-space12">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-age" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-device" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div> -->


</div>
<!--</div>-->
<script src="${request.contextPath}/statics/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${request.contextPath}/statics/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
	
    layui.use(['form', 'layer', 'echarts'], function () {
        var $ = layui.jquery,
        	form = layui.form,
            layer = layui.layer,
            echarts = layui.echarts;
        var stu="";
        for(var n=0;n<16;n++){
        	stu=stu+
        	'<div class="layui-col-xs12 layui-col-md2">'+
            '<div class="layui-card top-panel">'+
                '<div class="layui-card-header">1001房间</div>'+
                '<div class="layui-card-body">'+
                   ' <div class="layui-row layui-col-space5">'+
                        '<div class="layui-col-xs9 layui-col-md9 top-panel-number">'+
                            '<label id="usertotal">空闲</label>'+
                       ' </div>'+
                        '<div style="font-size: 19px" class="layui-col-xs3 layui-col-md3 top-panel-tips">1人</div>'+
                   ' </div>'+
              '  </div>'+
            '</div>'+
       ' </div>';
        }
        document.getElementById('aaa').innerHTML=''+stu;
        document.getElementById('aaa').innerHTML=''+stu;
        $.ajax({
            type: "POST",
            url: 'hcoption/list',
            data: {},
            dataType: "json",
            success: function (result) {
					document.getElementById('name').value=result.name;
					document.getElementById('icp').value=result.icp;
					document.getElementById('gw').value=result.gw;
					document.getElementById('em').value=result.em;
					document.getElementById('tj').value=result.tj;
            }
        });
        $(document).ready(function () {
	         $.ajax({
	             type: "POST",
	             url: serverUrl('hcoption/list'),
	             data: {},
	             dataType: "json",
	             success: function (result) {
						document.getElementById('name').value=result.name;
						document.getElementById('icp').value=result.icp;
						document.getElementById('gw').value=result.gw;
						document.getElementById('em').value=result.em;
						document.getElementById('tj').value=result.tj;
	             }
	         });
	 });
      //监听提交
        form.on('submit(saveBtn)', function (data) {
            submitForm();
            return false;
        });
        var submitForm = function () {
            var params = form.val('dataForm');
			var stu="{\"site_name\":\"";
			stu=stu+document.getElementById('name').value+"\",\"site_seo_title\":\"";
			stu=stu+"\",\"site_seo_keywords\":\"";
			stu=stu+"\",\"site_seo_description\":\"";
			stu=stu+"\",\"site_icp\":\"";
			stu=stu+document.getElementById('icp').value+"\",\"site_gwa\":\"";
			stu=stu+document.getElementById('gw').value+"\",\"site_admin_email\":\"";
			stu=stu+document.getElementById('em').value+"\",\"site_analytics\":\""+document.getElementById('tj').value+"\"}";
			//河池市宜州区职业教育中心","site_seo_keywords":"","site_seo_description":""
			//iption":"","site_icp":"桂公网安备 45128102451351号","site_gwa":"","site_admin_email":"","site_analytics":""
            params['optionValue'] = stu;
			console.log(stu);
            submitFormData('hcoption/update', params);
        };
        function submitFormData(uri, params, func) {
            var loadLayer = layer.load();
            var _parent = parent;
            $.ajax({
                type: "POST",
                url: uri,
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (result) {
                    layer.close(loadLayer);
                    if (result.code === 0) {
                        layer.msg('保存成功', {icon: 1, time: 1000}, function(){
                            var iframeIndex = _parent.layer.getFrameIndex(window.name);
                            _parent.layui.table.reload('currentTableId');
                            _parent.layer.close(iframeIndex);
                            if (func) func(result);
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function (req, msg) {
                    layer.close(loadLayer);
                    layer.msg(msg, {icon: 2});
                }
            });
        }
        $.ajax({
    		url:"/admin/total",
    		type:"post",
    		dataType:"",
    		success:function(res){
    			/* document.getElementById("usertotal").innerHTML=res.usertotal;
    			document.getElementById("commenttotal").innerHTML=res.commenttotal;
    			document.getElementById("forumtotal").innerHTML=res.forumtotal;
    			document.getElementById("videototal").innerHTML=res.videototal; */
    		},
    		error:function(){
    			console.log("用户总数获取异常");
    		}
    	})
    	$.ajax({
    		url:"/admin/echarts",
    		type:"post",
    		dataType:"",
    		success:function(res){
    			/**
    	         * 性别分布-玫瑰图
    	         */
    	        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
    	        var optionPies = {
    	            title: {
    	                text: '性别分布-玫瑰图',
    	                left: 'center'
    	            },
    	            tooltip: {
    	                trigger: 'item',
    	                formatter: '{a} <br/>{b} : {c} ({d}%)'
    	            },
    	            legend: {
    	                orient: 'vertical',
    	                left: 'left',
    	                data: ['男', '女']
    	            },
    	            series: [
    	                {
    	                    name: '男',
    	                    type: 'pie',
    	                    radius: '55%',
    	                    center: ['50%', '60%'],
    	                    roseType: 'radius',
    	                    data:res.sex,
    	                    emphasis: {
    	                        itemStyle: {
    	                            shadowBlur: 10,
    	                            shadowOffsetX: 0,
    	                            shadowColor: 'rgba(0, 0, 0, 0.5)'
    	                        }
    	                    }
    	                }
    	            ]
    	        };
    	        echartsPies.setOption(optionPies);
    			
    			
    			
    		},
    		error:function(){
    			console.log("获取异常");
    		}
    	})
        /**
         * 报表功能
         */
         /* 
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                text: '指标名称-报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsRecords.setOption(optionRecords); */


        
        /**
         * 年龄分布-玫瑰图
         */
        var echartsAge = echarts.init(document.getElementById('echarts-age'), 'walden');
        var optionAge = {
            title: {
                text: '年龄分布-玫瑰图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['20', '30']
            },
            series: [
                {
                    name: '30',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [
                        {value: 335, name: '30'},
                        {value: 300, name: '20'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsAge.setOption(optionAge);
        /**
         * 机型分布-玫瑰图
         */
        var echartsDevice = echarts.init(document.getElementById('echarts-device'), 'walden');
        var optionDevice = {
            title: {
                text: '机型分布-玫瑰图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['20', '30']
            },
            series: [
                {
                    name: '30',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [
                        {value: 335, name: '30'},
                        {value: 300, name: '20'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsDevice.setOption(optionDevice);
        /**
         * 柱状图
         */
        var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

        var optionDataset = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        echartsDataset.setOption(optionDataset);

        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
